<template>
  <div class="post-wrapper">
    <searchChild :postList="postLists" @postlistsearch="searchPost" />

    <el-row
      class="post-title"
      type="flex"
      justify="space-between"
      align="middle"
    >
      <h4>推荐攻略</h4>
      <el-button
        type="primary"
        icon="el-icon-edit"
        @click="$router.push('/post/writePost')"
        >写游记</el-button
      >
    </el-row>

    <div>
      <mainChild
        :postList="item"
        v-for="(item, index) in dataList"
        :key="index"
      />

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import mainChild from "./mainChildren/mainChild";
import searchChild from "./mainChildren/searchChildren";
export default {
  components: {
    mainChild,
    searchChild
  },
  data() {
    return {
      postList: [],

      postLists: [],

      // 获取用户列表的参数对象
      queryInfo: {
        // 默认显示第几页
        pagenum: 1,
        // 默认显示多少条数据
        pagesize: 3
      },
      // 总数据条数
      total: 0,

      postData: {
        _limit: 3,
        _start: 0
      },

      cityName: "",
      cityList: []
    };
  },
  computed: {
    dataList() {
      const start = (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize;
      // 列表结束的索引
      let end = start + this.queryInfo.pagesize;
      console.log(this.postList.slice(start, end));
      return this.postList.slice(start, end);
    }
  },
  created() {
    this.getPostData();
  },
  methods: {
    getPostData() {
      // console.log(this.postData._start);
      // console.log(this.postData._limit);
      this.$axios({
        url: "/posts",
        params: {
          _limit: this.postData._limit,
          _start: this.postData._start
        }
      }).then(res => {
        this.postList = res.data.data;
        console.log(this.postList);
        this.total = res.data.total;
        this.postLists = [...res.data.data];
        // console.log(this.postList.length);
        // this.total = res.data.total;
      });
    },

    getCity(item) {
      this.$axios({
        url: "/posts",
        params: {
          _limit: this.postData._limit,
          _start: this.postData._start,
          city: item
        }
      }).then(res => {
        // console.log(res.data);
        this.total = res.data.total;
        this.postList = res.data.data;
        console.log(this.postList);
        // this.$emit("postlistsearch", this.cityList);
      });
    },

    searchPost(item) {
      console.log(item);
      this.cityName = item;
      // this.postList = item.data;
      this.postData._limit = this.queryInfo.pagesize;
      this.postData._start = 0;
      this.getCity(item);
      // this.total = item.total;
    },

    handleSizeChange(newSize) {
      console.log(newSize);
      this.postData._limit = newSize;
      this.queryInfo.pagesize = newSize;
      this.getCity();
    },

    handleCurrentChange(newIndex) {
      // console.log(newIndex);
      let _start;
      if (newIndex > 1) {
        _start = newIndex * 3 - 3;
      }
      this.postData._start = _start;
      console.log(this.postData._start);
      this.getCity();
    }
  }
};
</script>

<style lang="less" scoped>
.post-wrapper {
  width: 700px;

  .post-title {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    position: relative;

    h4 {
      color: orange;
      font-size: 18px;
      font-weight: 400;
    }
    &::after {
      display: block;
      content: "";
      width: 72px;
      height: 2px;
      background: orange;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}
</style>
